<template>
  <div>
    <create-repo
      @click="handleClose"
      :display="showImport"
      :title="title"
      :detail="form"
      :type="type"
      :repoId="repoId"
    >
    </create-repo>
    <el-dialog
      :title="title"
      :visible.sync="display"
      :before-close="handleClose"
    >
      <delete
        :content="delete_content"
        :handleCancel="handleClose"
        :handleOk="handleDeleteOk"
      >
      </delete>
    </el-dialog>
    <ky-table
      ref="table"
      :getData="getProductPackagesGroup"
      :showSelect="showSelect"
      :search_data="search_data"
      :search_criteria="search_criteria"
    >
      <template v-slot:table-action>
        <authorization-button
          @click.native="handleAdd"
          class="kylin-item-button"
          name="Repository:create"
          >{{ $t("patch.add_repo") }}</authorization-button
        >
        <authorization-button
          :disabled="$refs.table && $refs.table.selectRow.ids.length == 0"
          @click="handleSync"
          class="kylin-item-button"
          name="Repository:scan"
          >{{ $t("patch.synchronize") }}</authorization-button
        >
        <authorization-button
          :disabled="$refs.table && $refs.table.selectRow.ids.length == 0"
          @click.native="handleDelete"
          class="kylin-item-button"
          name="Repository:batchDelete"
          >{{ $t("patch.delete_package_group") }}</authorization-button
        >
      </template>
      <template v-slot:table>
        <el-table-column :label="$t('name')">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: $route.path + '/' + scope.row.id + '?page=1&per_page=20',
                query: { id2: scope.row.id },
              }"
              @click.native="handleSelectRepo(scope.row)"
            >
              {{ scope.row.name }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="contentType" :label="$t('type')">
        </el-table-column>
        <el-table-column prop="lastSyncStatus" :label="$t('patch.sync_status')">
        </el-table-column>
        <el-table-column :label="$t('content')">
          <template slot-scope="scope">
            <router-link
              :to="{
                path:
                  $route.path +
                  '/' +
                  scope.row.id +
                  '/content?page=1&per_page=20',
                query: { repoId: scope.row.id },
              }" @click.native="handleSelectRepo(scope.row)"
            >
              {{ scope.row.packageCount }}软件包
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('action')">
          <template slot-scope="scope">
            <authorization-button
              @click.native.prevent="handleEdit(scope.row.id)"
              type="text"
              size="medium"
              name="Repository:update"
            >
              {{ $t("edit") }}
            </authorization-button>
          </template>
        </el-table-column>
      </template>
    </ky-table>
  </div>
</template>

<script>
import {
  getProductPackagesGroup,
  getRepoSync,
  deleteProductRepo,
  getProductRepoDetail,
} from "@/api/patch";
import kyTable from "@/components/KyTable";
import createRepo from "../form/createRepo.vue";
import AuthorizationButton from "@/components/AuthorizationButton";
import Delete from "@/components/Delete";
export default {
  components: {
    kyTable,
    createRepo,
    AuthorizationButton,
    Delete,
  },
  data() {
    return {
      showImport: false,
      title: "",
      type: "",
      repoId: 0,
      display: false,
      search_criteria: {
        sortBy: "id",
        sortOrder: "desc",
      },
      search_data: {
        name: {
          name: "name",
          type: "text",
        },
        contentType: {
          name: "type",
          type: "select",
          items: [{ key: "yum", name: "yum" }],
        },
      },
      showSelect: true,
      form: {},
      table: {
        size: 20,
        total: 0,
        currentPage: 1,
        tableData: [],
        loading: false,
      },
      delete_content: "",
    };
  },
  methods: {
    getProductRepoDetail,
    getProductPackagesGroup(data) {
      return getProductPackagesGroup(data, this.$route.params.id);
    },

    handleSync() {
      getRepoSync({
        id: this.$route.params.id,
        repoIds: this.$refs.table.selectRow.ids,
      }).then((res) => {
        if (res.data.code == "0") {
          this.$message({
            type: "success",
            message: res.data.message,
          });
          this.$refs.table.handleSearch();
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        }
      });
    },
    handleClose() {
      this.type = "";
      this.title = "";
      this.display = false;
      this.showImport = false;
      this.$refs.table.handleSearch();
    },
    handleAdd() {
      this.title = this.$t("patch.add_repo");
      this.type = "add_repo";
      this.showImport = true;
    },

    handleEdit(id) {
      this.title = this.$t("patch.edit_repo");
      this.type = "edit_repo";
      this.repoId = id;
      this.getProductRepoDetail({ id: this.$route.params.id, id2: id }).then(
        (res) => {
          this.form = res.data.data;
        }
      );
      this.showImport = true;
    },
    handleDelete() {
      this.display = true;
      this.type = "delete";
      this.title = this.$t("patch.delete_package_group");
      let arr = [];
      this.$refs.table.selectRow.rows.map(function (row) {
        arr.push(row.name);
      });
      this.delete_content = this.$t("patch.delete_repo_content").replace(
        "%s",
        arr.toString()
      );
    },
    async handleDeleteOk() {
      let data = {};
      if (this.$refs.table.select_id === "2") {
        const res = await this.getProductPackagesGroup({
          ...this.search_criteria,
          ...this.$route.query,
          paged: false,
        });
        let ids = [];
        res.data.data.results.map((item) => {
            if (!this.$refs.table.selectRow.excludeIds.includes(item.id)) {
                ids.push(item.id);
            }
        });
        data["repoIds"] = ids;
      } else {
        data["repoIds"] = this.$refs.table.selectRow.ids;
      }
      const res = await deleteProductRepo({
        ...data,
        id: this.$route.params.id,
      });
      if (res.data.code == "0") {
        this.$message({
          type: "success",
          message: res.data.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.data.message,
        });
      }
      this.display = false;
      this.edit_id = null;
      this.type = "";
      this.$refs.table.handleSearch();
    },
    handleSelectRepo(data) {
      this.$store.commit("set_repo", { selectRepo: data.name });
    },
  },
};
</script>

<style>
</style>